<script setup>
import { ref, watch } from 'vue' //引入响应式状态函数
//引入dayjs日期库
import dayjs from 'dayjs'
import { fetch24HourData } from '@/api/weatherAPI'
import { initBasicLineChart } from '../util/echarts'
//声明一个变量获取未来24小时的天气数据,此数组有24个，是数组
const hour24 = ref([]) //表示此数据是空数组，用来存放api中返回的未来24小时天气数据
//声明两个变量分别存放预报时间和温度
const hour24FxTime = ref([]) //存放未来24小时的预报时间
const hour24Temp = ref([]) //存放未来24小时的温度
const updateTime = ref('') //天气更新时间

const chartDom = ref(null) //vue3中获取dom元素的方式，此为第1步，声明一个引用
//引入状态管理
import { useCityStore } from '../stores/cityStore'
//获取store实例
const cityStore = useCityStore()

//添加侦听器:监听状态管理中location状态的变化
watch(
  //第1个参数【必选】：监听的数据源
  () => cityStore.location,
  //第2个参数【必选】：回调函数，当数据源有变化是，需要做的事情
  () => {
    getData(cityStore.location.id)
  },
  //第3个参数【可选】：即时回调，初始状态执行一个回调函数【网络请求未来24小时天气预报数据函数】
  { immediate: true }
)

//调用网络请求的函数
// getData(cityStore.location.id)
//网络请求，异步获取api数据并进行处理
async function getData(locationID) {
  const res = await fetch24HourData(locationID) //调用api模块化封装的函数
  // console.log(res) //控制台输出响应数据
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分') //保存后端获取的更新时间updateTime
  hour24.value = res.hourly //把响应数据临时先保存到hour24中
  // 初始化未来24小时时间和温度的数组为空
  hour24FxTime.value = []
  hour24Temp.value = []
  //遍历未来24小时数据，把fxTime（预报时间）和temp（温度）提取出来放到hour24FxTime和hour24Temp
  hour24.value.forEach((element) => {
    hour24FxTime.value.push(element.fxTime) //预报时间
    hour24Temp.value.push(element.temp) //温度
  })
  //调用图表函数
  initBasicLineChart(
    chartDom.value,
    hour24FxTime.value.map((x) => dayjs(x).format('HH')),
    hour24Temp.value
  )
}
</script>

<template>
  <!-- 在页面中可以使用响应状态数据 -->
  <div>
    <!-- {{ hour24 }} -->
    <h3>未来24小时天气预报</h3>
    <div>
      <span>最后更新时间：{{ updateTime }}</span>
    </div>
    <!-- <ul>
      <li v-for="(item, index) in hour24" :key="index">
        {{ index }} - <span>预报时间：</span>{{ item.fxTime }} - <span> 温度:</span>{{ item.temp }}
      </li>
    </ul> -->
    <!-- 添加图表库所需要的容器 -->
    <!-- vue3中获取dom元素的方式，此为第2步，在容器元素中添加ref属性与第1步中的引用进行绑定 -->
    <div id="main" ref="chartDom"></div>
  </div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}
</style>
